<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
import axios from 'axios'

// 用于存储从API获取的文本内容
const textContent = ref('')

/**
 * 异步方法，用于从API获取数据并更新 textContent
 */
const fetchData = async () => {
  try {
    // 发送GET请求到指定的API端点
    const response = await axios.get('http://192.168.192.55:8080/getAllEmployees')
    // 检查响应状态码是否为200
    if (response.status !== 200) {
      // 如果状态码不是200，抛出一个错误
      throw new Error('Failed to fetch data: UNSUPPORTED_OS')
    }
    // 将响应数据赋值给textContent
    textContent.value = response.data
  } catch (error) {
    // 捕获并打印错误信息
    console.error('Error fetching data:', error)
    // 如果错误是一个实例，将错误消息赋值给textContent
    textContent.value = error instanceof Error
        ? error.message
      : '网络请求异常，请检查连接'
  }
}
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <input type="text" v-model="textContent" placeholder="从API获取的内容将显示在这里" />
  <button @click="fetchData">更新内容</button>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>